<template>
  <Modal v-model="portModal" title="广告端口管理" footer-hide width="50%">
    <div class="port_box">
      <Select
        v-model="port"
        style="width: 200px"
        placeholder="请选择业务端口"
        @on-change="changePort"
        @on-open-change="open">
        <Option v-for="item in options" :value="item.key" :key="item.key">{{ item.value }}</Option>
      </Select>
      <div class="check_box" v-if="portModal">
        <div class="check_item" v-for="(item, index) in roleList" :key="index">
          <div>{{ item.roleName }}</div>
          <Checkbox @on-change="changeHandle(item)" :value="item.checked" />
        </div>
      </div>
    </div>
    <div class="btn_box">
      <Button @click="close" style="margin-right: 20px">取消</Button>
      <Button type="primary" @click="sureBtn">确认</Button>
    </div>

    <Modal v-model="selectModal" title="广告端口设置保存提醒" footer-hide :mask-closable="false">
      <p>请确认，当前业务端口设置未保存，是否进行保存？</p>
      <div class="btn_box">
        <Button @click="closeSelect(1)">取消</Button>
        <Button type="primary" ghost style="margin: 0 8px" @click="closeSelect">直接切换</Button>
        <Button type="primary" @click="closeSelect(2)">保存并切换</Button>
      </div>
    </Modal>
  </Modal>
</template>

<script>
  import adMgr from '@/biz/backStage/advertisement'
  export default {
    data() {
      return {
        selectModal: false,
        portModal: false,
        port: 'COUNSELOR',
        portCopy: '',
        options: this.$dt.dictInfo().advertisementPort,
        roleList: [],
        roleListCopy: [],
        needRole: []
      }
    },

    methods: {
      show() {
        this.getRoleList()
        this.portModal = true
      },
      getRoleList() {
        let params = {
          port: this.port
        }
        adMgr.getRoleListByPort(params).then((res) => {
          console.log('角色列表', res)
          this.roleList = res
          this.roleListCopy = res
          this.needRole = res
            .filter((item) => {
              return item.checked == true
            })
            .map((child) => {
              return child.roleId
            })
        })
      },
      saveHandle(port = this.port) {
        let params = {
          port: port,
          roleList: this.needRole
        }
        adMgr.updateRoleByPort(params).then((res) => {
          this.$Message.success('保存成功')
        })
      },
      close() {
        this.needRole = []
        this.port = 'COUNSELOR'
        this.portModal = false
      },
      sureBtn() {
        this.saveHandle()
        this.portModal = false
      },
      changeHandle(e) {
        let num = this.needRole.indexOf(e.roleId)
        if (num > -1) {
          this.needRole.splice(num, 1)
        } else {
          this.needRole.push(e.roleId)
        }
      },
      changePort(v) {
        console.log(v)
        if (v) {
          this.selectModal = true
        }
        this.roleList = []
      },
      open(v) {
        if (v) {
          this.portCopy = this.port
        }
      },
      closeSelect(n) {
        if (n == 1) {
          this.port = this.portCopy
          this.roleList = this.roleListCopy
        } else if (n == 2) {
          this.saveHandle(this.portCopy)
          setTimeout(() => {
            this.getRoleList()
          }, 100)
        } else {
          this.getRoleList()
        }
        console.log(this.port)
        this.selectModal = false
      }
    }
  }
</script>

<style lang="scss" scoped>
  .btn_box {
    border-top: 1px solid #e8eaec;
    padding-top: 20px;
    margin-top: 20px;
    text-align: right;
  }
  .check_box {
    margin-top: 20px;
  }
  .check_item {
    width: 300px;
    display: flex;
    justify-content: space-between;
    padding-left: 12px;
    margin-bottom: 12px;
  }
</style>
